Pseudo classes (1/50)
What is a pseudo-class in CSS?
    Understanding CSS Pseudo-Classes

    A CSS pseudo-class is a keyword added to selectors that specifies a special state of the selected elements. Pseudo-classes allow you to style elements based on their state, position, or relation to other elements, without needing to add extra classes in HTML.

    Common Pseudo-Classes
    • `:hover` – Styles an element when the user hovers over it with a mouse.
    • `:focus` – Styles an element when it receives focus (e.g., input fields).
    • `:active` – Styles an element during activation (e.g., when a button is clicked).
    • `:first-child` / `:last-child` – Targets elements based on their position among siblings.
    • `:nth-child(n)` – Styles elements based on a numeric pattern among siblings.
    • `:not(selector)` – Selects elements that do not match the given selector.
    • `:disabled` / `:checked` – Styles form elements based on their state.
    Example: Using Pseudo-Classes

    In this example, pseudo-classes are used to style buttons on hover, input fields on focus, and list items based on their position among siblings.

    Best Practices
    • Use pseudo-classes to reduce the need for extra classes in HTML for styling dynamic states.
    • Combine pseudo-classes with pseudo-elements (`::before`, `::after`) for more complex designs.
    • Be mindful of accessibility; for example, `:hover` effects should not be the only way to convey important information.
    • Test pseudo-class styling across different browsers to ensure consistent behavior.